<template>
  <div>
    <x-header/>
    <main-nav/>
    <el-carousel :interval="4000" class="main_page_carousel" autoplay loop>
      <el-carousel-item><img src="./images/img1.jpg" alt=""></el-carousel-item>
      <el-carousel-item><img src="./images/img2.jpg" alt=""></el-carousel-item>
      <el-carousel-item><img src="./images/img3.jpg" alt=""></el-carousel-item>
    </el-carousel>
    <div class="show_result">
      <div class="result_item">
        <div class="name">特色智库</div>
        <div class="sum">15个</div>
      </div>
      <div class="result_item">
        <div class="name">学者空间</div>
        <div class="sum">286个</div>
      </div>
      <div class="result_item">
        <div class="name">知识库</div>
        <div class="sum">274732条</div>
      </div>
      <div class="result_item">
        <div class="name">基础数据库</div>
        <div class="sum">27482条</div>
      </div>
      <div class="result_item">
        <div class="name">使用次数</div>
        <div class="sum">3483698次</div>
      </div>
    </div>
    <div class="data_theme">
      <x-subtitle title="数据主题" subname="The Data Directory"></x-subtitle>
      <div class="theme_list">
        <x-pic-box word="特色智库" :pic="theme1" width="194" height="145"></x-pic-box>
        <x-pic-box word="学者空间" :pic="theme2" width="194" height="145"></x-pic-box>
        <x-pic-box word="知识库" :pic="theme3" width="194" height="145"></x-pic-box>
        <x-pic-box word="机构" :pic="theme4" width="194" height="145"></x-pic-box>
        <x-pic-box word="人才" :pic="theme5" width="194" height="145"></x-pic-box>
        <x-pic-box word="成果" :pic="theme6" width="194" height="145"></x-pic-box>
        <x-pic-box word="科研成果" :pic="theme7" width="194" height="145"></x-pic-box>
        <x-pic-box word="学会" :pic="theme8" width="194" height="145"></x-pic-box>
        <x-pic-box word="学科" :pic="theme9" width="194" height="145"></x-pic-box>
        <x-pic-box word="科普" :pic="theme10" width="194" height="145"></x-pic-box>
      </div>
    </div>
    <div class="data_statistics">
      <x-subtitle title="数据统计" subname="The Data Statistics"></x-subtitle>
      <div class="tab_pane">
      <el-tabs v-model="activeName" tab-position="left">
        <el-tab-pane label="用户管理" name="first">
          <div class="chart">
            <x-echarts :options="pie" :init-options="initOptions" ref="pie"  autoresize width="1000"></x-echarts>
          </div>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">
          <div class="chart">
            <x-echarts :options="bar" :init-options="initOptions" ref="bar"  autoresize width="1000"></x-echarts>
          </div>
        </el-tab-pane>
        <el-tab-pane label="角色管理" name="third">
          <div class="chart">
            <x-echarts :options="polarTheme" :init-options="initOptions" ref="polarTheme"  autoresize width="1000"></x-echarts>
          </div>
        </el-tab-pane>
        <el-tab-pane label="任务补偿" name="fourth">
          <div class="chart">
            <x-echarts :options="scatter" :init-options="initOptions" ref="scatter"  autoresize width="1000"></x-echarts>
          </div>
        </el-tab-pane>
      </el-tabs>
      </div>
    </div>
    <div class="social_news">
      <x-subtitle title="社科动态" subname="The News And Notice"></x-subtitle>
    </div>
  </div>
</template>

<script>
  import theme1 from './images/theme1.jpg'
  import theme2 from './images/theme2.jpg'
  import theme3 from './images/theme3.jpg'
  import theme4 from './images/theme4.jpg'
  import theme5 from './images/theme5.jpg'
  import theme6 from './images/theme6.jpg'
  import theme7 from './images/theme7.jpg'
  import theme8 from './images/theme8.jpg'
  import theme9 from './images/theme9.jpg'
  import theme10 from './images/theme10.jpg'
  import {pie} from './data/pie'
  import {bar} from './data/bar'
  import polar from './data/polar'
  import scatter from './data/scatter'
  import qs from 'qs'

  export default {
    name: "index",
    data() {
      let options = qs.parse(location.search, { ignoreQueryPrefix: true })
      return {
        theme1, theme2, theme3, theme4, theme5, theme6, theme7, theme8, theme9, theme10,pie,bar,polar,scatter,
        initOptions: {
          renderer: options.renderer || 'canvas'
        },
        polarTheme: 'dark',
        flightOptions: null,
        activeName: 'fourth',

      }
    },
    methods:{
      getPieData(){
        var myChart = this.$echarts.init(document.getElementById('pie'));
        // 绘制基本图表
        myChart.setOption(pie);
        myChart.showLoading();
        this.$axios.postJson("/data/pieData").then(res => {
          myChart.hideLoading(); //隐藏加载动画
          myChart.setOption({
            series: [{
              data: res.data.product  //将异步请求获取到的数据进行装载
            }],
            legend:[{
              data:res.data.name
            }]
          })
        })
      },
    },
    mounted(){
      this.getPieData();
    }
  }
</script>

<style scoped lang="less">
  .show_result {
    height: 86px;
    line-height: 86px;
    display: flex;
    justify-content: center;
    background-color: #c9d9f9;
    .result_item {
      display: inline-block;
      width: 235px;
      height: 86px;
      text-align: center;
      line-height: 86px;
      .name {
        color: #000;
        height: 43px;
        font-size: 20px;
        font-weight: 500;
        line-height: 43px;
        vertical-align: center;
      }
      .sum {
        color: #1880fb;
        height: 43px;
        line-height: 43px;
        vertical-align: center;
        font-size: 24px;
        font-weight: 600;
      }
    }
  }

  .data_statistics {
    background-color: #fbfbfb;
    padding-bottom: 96px;
    overflow: hidden;
  }
  .chart{
    display: flex;
    justify-content: space-evenly; /* 均匀排列每个元素, 每个元素之间的间隔相等 */
    flex-wrap: wrap;    /*换行，第一行在上方*/
  }
  .tab_pane{
    width: 1200px;
    margin: 0 auto;
  }
</style>
<style lang="less">
  .main_page_carousel .el-carousel__container {
    height: 500px;
  }

  .theme_list {
    width: 1200px;
    margin: 0 auto 155px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    cursor: pointer;
    .pic_box {
      margin: 17px;
    }
  }
</style>
